<template>
  <el-dialog
      width="60%"
      v-model="state.visible"
  >
    <div class="nursing-home-card">
      <!-- 头部标题和浏览数 -->
      <el-row justify="space-between" align="middle" class="header">
        <el-col :span="12">
          <h2 class="title">{{ state.ruleForm.name }}</h2>
        </el-col>
      </el-row>

      <img :src="state.ruleForm.image" alt="图片" class="home-image">

      <el-row justify="space-between" align="middle" class="tags-price">
        <el-col :span="12">
          <div class="tags">
            <el-tag

                v-for="(tag, index) in state.ruleForm.tags"
                :key="index"
                type="danger"
                effect="dark"
                class="m-r-8"
            >
              {{ tag }}

            </el-tag>
          </div>
        </el-col>
        <el-col :span="12" class="price-col">
          <div class="price">
            <span class="currency">￥</span>
            <span class="amount">{{ state.ruleForm.price }}</span>
            <span class="unit">元起/月</span>
          </div>
        </el-col>
      </el-row>

      <!-- 地址 -->
      <div class="address">
        <el-icon><Location /></el-icon>
        <span>{{ state.ruleForm.address }}</span>
      </div>

      <!-- 机构信息 -->
      <el-row :gutter="20" class="info">
        <el-col :span="12">
          <div class="info-item">
            <label>机构性质：</label>
            <span>{{ state.ruleForm.nature }}</span>
          </div>
          <div class="info-item">
            <label>机构类型：</label>
            <span>{{ state.ruleForm.type }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <label>床位数量：</label>
            <span>{{ state.ruleForm.beds }}个</span>
          </div>
        </el-col>
      </el-row>


      <h1 style="text-align: center; color:red">地理位置</h1>
      <!-- 百度地图 -->
      <baidu-map
          class="map"
          :center="center"
          :zoom="zoom"
          @ready="handler"
      >
      </baidu-map>
      <h1 style="text-align: center; ">具体介绍</h1>
      <!-- 内容 -->
      <div v-html="state.ruleForm.content"></div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closedialog">关 闭</el-button>
    </span>
  </el-dialog>

  <div class="footer">
    <div>社区养老服务整合平台</div>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { BaiduMap } from 'vue-baidu-map-3x';
import { clientgetNursingHomeById } from '../../service/nursingHomeApi.js';
import { Location } from '@element-plus/icons-vue';

// 地图相关
const center = ref({ lng: 116.404, lat: 39.915 }); // 默认中心点
const zoom = ref(15); // 默认缩放级别
const BMap = ref(null); // 百度地图 API 实例
const map = ref(null); // 地图实例

// 弹窗状态和数据
const state = reactive({
  visible: false,
  ruleForm: {
    id: '',
    name: '',
    image: '',
    price: '',
    address: '',
    tags: [],
    beds: '',
    nature: '',
    type: '',
    content: ''
  }
});

// 地图初始化完成后的回调
const handler = ({ BMap: bmap, map: mapInstance }) => {
  BMap.value = bmap;
  map.value = mapInstance;

  // 如果地址存在，解析地址并设置地图中心点
  if (state.ruleForm.address) {
    getLocation(state.ruleForm.address);
  }
};

// 根据地址获取经纬度
const getLocation = (address) => {
  if (!BMap.value || !address) return;

  const geocoder = new BMap.value.Geocoder();
  geocoder.getPoint(
      address,
      (point) => {
        if (point) {
          center.value = point; // 更新地图中心点
        } else {
          console.error('无法解析该地址');
        }
      },
      '全国' // 指定搜索范围
  );
};

// 打开弹窗
const open = async (id) => {
  state.visible = true;
  if (id) {
    await getDetail(id);
  }
};

// 获取详情
const getDetail = async (id) => {
  const result = await clientgetNursingHomeById(id);
  state.ruleForm = {
    id: result.data.id,
    name: result.data.name,
    image: result.data.image,
    price: result.data.price,
    address: result.data.address,
    tags: result.data.tags.split('、'),
    beds: result.data.beds,
    nature: result.data.nature,
    type: result.data.type,
    content: result.data.content
  };

  // 如果地址存在，解析地址并设置地图中心点
  if (state.ruleForm.address) {
    getLocation(state.ruleForm.address);
  }
};

// 关闭弹窗
const closedialog = () => {
  state.visible = false;
};

// 暴露方法
defineExpose({ open });
</script>

<style scoped>
.nursing-home-card {
  padding: 20px;
}

.home-image {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  margin-bottom: 20px;
}

.tags-price {
  margin-bottom: 20px;
}

.tags {
  display: flex;
  align-items: center;
}

.price-col {
  text-align: right;
}

.price {
  font-size: 24px;
  color: #f56c6c;
}

.address {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.info {
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 10px;
}

.map {
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end; /* 左对齐 */
  padding-right: 20px; /* 添加左边距 */
}
.title{
  color: #303133;
}
/* 设置关闭按钮为红色样式 */
.dialog-footer .el-button {
  background-color: #ff4d4f; /* 红色背景 */
  border-color: #ff4d4f; /* 红色边框 */
  color: white; /* 白色文字 */
}

/* 悬停效果 */
.dialog-footer .el-button:hover {
  background-color: #ff7875; /* 浅红色背景 */
  border-color: #ff7875; /* 浅红色边框 */
}

/* 点击效果 */
.dialog-footer .el-button:active {
  background-color: #d9363e; /* 深红色背景 */
  border-color: #d9363e; /* 深红色边框 */
}

.footer {
  font-size: 14px;
  height: 100px; /* 根据需要调整高度 */
  border-top: 1px solid #e9e9e9;
  display: flex;
  flex-direction: row; /* 水平排列 */
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.beian-footer {
  bottom: 0;
  text-align: center;

a {
  color: #1D1D26;
  font-size: 14px;
  text-decoration-line: underline;

&:hover {
   color: #409EFF;
 }
}
}

</style>